<template>
  <div class="login-content">
    <p style="text-align:center;color:rgb(100, 34, 37);font-size: 20px">
      宗旨：为求职者找到合适的工作岗位
    </p>
    <p style="text-align:center;font-weight: bold">求职登记表</p>
    <van-form @submit="onSubmit">
      <van-field
        label="您的姓名"
        required
        name="name"
        v-model="name"
        :rules="[{ required: true, message: '请输入姓名' }]"
        placeholder="请输入姓名"
      />

      <van-field
        clickable
        required
        name="picker"
        :value="sex"
        label="您的性别"
        :rules="[{ required: true, message: '请选择性别' }]"
        placeholder="请选择性别"
        @click="showPupup('')"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        clickable
        required
        name="picker"
        :value="age"
        label="您的年龄"
        placeholder="请选择年龄"
        :rules="[{ required: true, message: '请选择年龄' }]"
        @click="showPupup(2)"
      />
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>

      <van-field
        clickable
        required
        name="picker"
        :value="academicQualifications"
        label="您的学历"
        placeholder="请选择学历"
        :rules="[{ required: true, message: '请选择学历' }]"
        @click="showPupup(3)"
      />
      <van-popup v-model="showPicker3" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns3"
          @confirm="onConfirm3"
          @cancel="showPicker3 = false"
        />
      </van-popup>

      <van-field
        label="您的专业"
        name="job"
        v-model="job"
        placeholder="请输入专业"
      />

      <van-field
        label="您的籍贯"
        required
        name="home"
        v-model="home"
        :rules="[{ required: true, message: '请输入籍贯' }]"
        placeholder="例如：福建/厦门"
      />

      <van-field
        label="您的现居住地址"
        required
        name="addr"
        v-model="addr"
        :rules="[{ required: true, message: '请输入现居住地址' }]"
        placeholder="例如：厦门/翔安"
      />

      <van-field
        label="您的联系电话"
        required
        name="phone"
        v-model="phone"
        :rules="[{ required: true, message: '请输入电话' }]"
        placeholder="请输入电话"
      />

      <p style="color:red;padding:0 20px">
        提示:*为必填项。资料填写好时请点击提交。提交后将有
        工作人员联系您，结合你的实际情况介绍工作，请留意手机
        来电。感谢您抽取宝贵时间填写登记表。
      </p>

      <div class="btn padding">
        <van-button class="btn-color" size="large">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from "vant";
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      name: "",
      home: "",
      sex: "",
      phone: "",
      addr: "",
      academicQualifications: "",
      age: "",
      job: "",
      columns: ["男", "女"],
      columns2: new Array(100).fill(0).map((_, index) => `${index + 1}`),
      columns3: [
        "小学",
        "初中",
        "高中",
        "职校",
        "中专",
        "大专",
        "本科",
        "博士",
        "硕士"
      ],
      showPicker: false,
      showPicker2: false,
      showPicker3: false
    };
  },
  methods: {
    showPupup(index){
      this['showPicker' + index] = true;
      setTimeout(()=>{document.activeElement.blur();}, 500)
    },
    onConfirm(value) {
      this.sex = value;
      this.showPicker = false;
    },
    onConfirm2(value) {
      this.age = value;
      this.showPicker2 = false;
    },
    onConfirm3(value) {
      this.academicQualifications = value;
      this.showPicker3 = false;
    },
    onSubmit() {
      const _that = this;
      axios
        .post(`https://linbojob.xyz/job-server/job/CreateUser`, {
          name: _that.name,
          sex: _that.sex,
          age: _that.age,
          academicQualifications: _that.academicQualifications,
          job: _that.job,
          home: _that.home,
          addr: _that.addr,
          phone: _that.phone
        })
        .then(res => {
          if (res && res.data && res.data.code === 0) {
            console.log(res.data);
            Toast.success("提交成功!");
          } else {
            if(res.data.err.includes('db_job_user_user_phone')){
              Toast.fail("提交失败! 电话号码存在");
            }else{
               Toast.fail("提交失败!");
            }
          }
        })
        .catch(() => {
          Toast.fail("提交失败!");
        });
    }
  }
};
</script>

<style scoped>
.btn-color {
  background: rgb(100, 34, 37);
  color: #fff;
}

.padding {
  padding: 40px 15px;
}
</style>
